import React, { useEffect, useState } from "react";
import { Modal, Button } from "antd";
import { xhrPostJson } from "@/services";
import _ from "lodash";
import { CheckOutlined, RollbackOutlined } from "@ant-design/icons";
import { useInitData } from "./use-events";
import { useScemaRender } from "../utils";
import { MetaSorted } from "schema-form";
import { IFormProps } from "@formily/core/esm/types";
import { ISchemaFieldFactoryOptions } from "@formily/react";
import { xhr_get } from "@/biz-components/_common/request";
interface ModalFormProps {
  api?: {
    url?: string;
    param?: any;
    type: "POST" | "GET";
  };
  title: string;
  visible: boolean;
  onCancel: () => any;
  onOk?: (values: any, cb: any) => any;
  modalMetasConfig?: MetaSorted;
  filedConfig?: ISchemaFieldFactoryOptions;
  formConfigs?: IFormProps;
  needFormat?: boolean;
  width?: number;
  type?: any;
  eventMap?: any;
  needGroup?: boolean;
}
const ModalDetailForm = ({
  title,
  visible,
  onCancel,
  onOk,
  filedConfig,
  formConfigs,
  needFormat = true,
  width = 900,
  type = "DETAIL",
  api,
  eventMap,
  needGroup = false,
  modalMetasConfig: metasConfig,
}: ModalFormProps) => {
  const [modalMetasConfig, setModalMetasConfig] = useState<null | any>();
  const [loading, setLoading] = useState(false);
  const { form, SchemaFormRender } = useScemaRender(filedConfig, formConfigs);
  useEffect(() => {
    if (metasConfig && visible) {
      setModalMetasConfig(metasConfig);
    }
  }, [JSON.stringify(metasConfig), visible]);
  useEffect(() => {
    if (api?.url && visible) {
      setLoading(true);
      api?.type === "POST"
        ? xhrPostJson(api?.url, api?.param as any)
            .then((res: any) => {
              setLoading(false);
              setModalMetasConfig(res?.result);
            })
            .catch((err) => {
              setLoading(false);
              console.log(`${err}获取详情失败`);
            })
        : xhr_get(api?.url, api?.param as any)
            .then((res: any) => {
              setLoading(false);
              setModalMetasConfig(res?.result);
            })
            .catch((err) => {
              setLoading(false);
              console.log(`${err}获取详情失败`);
            });
    }
  }, [JSON.stringify(api), visible]);
  let meta = _.cloneDeep(modalMetasConfig);
  if (needFormat) {
    meta = useInitData(meta, null, type, needGroup, eventMap || {});
  }
  return (
    <Modal
      title={title}
      visible={visible}
      width={width}
      destroyOnClose
      onCancel={() => {
        onCancel();
      }}
      maskClosable={false}
      confirmLoading={loading}
      // onOk={() => {
      //   onCancel();
      // }}
      cancelButtonProps={{
        icon: <RollbackOutlined />,
      }}
      footer={
        <Button icon={<RollbackOutlined />} onClick={onCancel}>
          返回
        </Button>
      }
      // okButtonProps={{
      //   icon: <CheckOutlined />,
      // }}
    >
      {meta?.schema && (
        <SchemaFormRender schema={meta?.schema} pageConfig={meta?.pageConfig} />
      )}
    </Modal>
  );
};

export default ModalDetailForm;
